<script setup>
import { ref , onMounted } from 'vue'
import * as echarts from 'echarts';
import { useRouter } from 'vue-router';
import venuApplyService from '@/api/resource/venuApplyService';
import tool from '../../utils/tool';
onMounted(()=>{
  let userId=tool.data.get('USER_INFO').id
  venuApplyService.queryRecent(userId).then((data)=>{
    recentList.value=data
  })
  venuApplyService.queryRank(userId).then((data)=>{
    if(data.length<=3){
      for(let i=0;i<data.length;i++){
        RankData.value.push({value:data[i].number,name:data[i].venueName})
      }
    }
    else{
      for(let i=0;i<3;i++){
        RankData.value.push({value:data[i].number,name:data[i].venueName})
      }
    }
    venueData.value=data
  })
  venuApplyService.queryVenueWeek(userId).then((data)=>{
    yData=data
  })
})
let router=useRouter()
const venueData=ref([])
const recentTitle=[
  '最近一次预约成功','最近一次结束','正在使用中'
]
let RankData=ref([])
const recentList=ref([])
const option = {
    title : {
        text: '预约占比',
        x:'center',
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
      color: ['#1891FF', '#12C3C3', '#FBCD14', '#F14864', '#8542E1', '#7DA6FF', '#4AC312', '#FB8F14', '#F148E7'],
    series : [
        {
            name: '预约占比',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            label: {
                normal: {
                    rich: {
                        per: {
                            color: '#eee',
                            backgroundColor: '#334455',
                            padding: [2, 4],
                            borderRadius: 13,
                        }
                    }
                }
            },
            data:RankData.value,
            itemStyle: {
                 normal: {
            },
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
             labelLine: {
            normal: {
                length: 5,
                length2: 1,
                smooth: true,
            }
        },
        }
    ]
};
var yData = [0, 0, 0, 0,];
var xData = ['第一周', '第二周', '第三周', '第四周',];
var option2 = {
    color: ["#5487FF"],
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "2%",
      right: "5%",
      bottom: "5%",
      top: "30px",
      containLabel: true,
    },
    dataZoom: [
      {
        type: 'slider',
        xAxisIndex: 0,
        startValue: 0,
        endValue: 7,
        filterMode: 'filter',
        height: 4,
        bottom: 5,
        handleSize: '300%',
        handleIcon:
          'image://',
        handleStyle: {
          color: '#0E1557'
        },
        backgroundColor: '#1c3a75',
        fillerColor: '#295fcc',
        borderColor: 'transparent',
        textStyle: {
          color: 'transparent'
        },
        dataBackground: {
          areaStyle: {
            opacity: 0
          },
          lineStyle: {
            opacity: 0
          }
        }
      }
    ],
    legend: {
      show: true,
      icon: "rect",
      orient: "horizontal",
      left: "right",
      itemWidth: 12,
      itemHeight: 12,
      formatter: ["{a|{name}}"].join("\n"),
      textStyle: {
        fontSize: 12,
        color: "#6A93B9",
        height: 8,
        rich: {
          a: {
            verticalAlign: "bottom",
          },
        },
      },
      data: ["预约数"],
    },
    xAxis: {
      type: "category",
      axisLabel: {          //坐标轴字体颜色
        textStyle: {
          color: '#9eaaba'
        }
      },
      axisLine: {
        lineStyle: {
          color: "#e5e5e5"
        }
      },
      axisTick: {       //y轴刻度线
        show: false
      },
      splitLine: {    //网格
        show: false,
      },
      boundaryGap: true,
      data: xData,
    },
    yAxis: {
      type: 'value',
      axisLabel: {        //坐标轴字体颜色
        textStyle: {
          color: '#9eaaba'
        }
      },
      axisLine: {
        show: false,
      },
      axisTick: {       //y轴刻度线
        show: false
      },
      splitLine: {    //网格
        show: true,
        lineStyle: {
          color: '#dadde4',
          type: "dashed"
        }
      }
    },
    series: [
      {
        type: "line",
        symbol: 'circle',
        smooth: true, // 是否曲线
        name: "预约数", // 图例对应类别
        data: yData, // 纵坐标数据
        symbolSize: 8,
        itemStyle: {
          normal: {
            label: {
              show: true, //开启显示
              position: 'top', //在上方显示
              textStyle: {
                //数值样式
                fontSize: 14,
                color: "#5487FF"
              },
            },
          }
        },
        lineStyle: {
          normal: {
            shadowColor: '#5487FF',
            shadowBlur: 8,
            shadowOffsetY: 10,
            shadowOffsetX: 0,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#5487FF'
            }, {
              offset: 1,
              color: '#5487FF'
            }]),
          }
        },
      },
    ],
  };


</script>
<template>
    <div class="total">
        <div class="row1">
            <el-main class="row1-main1">
                <el-card style="height: 100%;" shadow="never">
                    <el-row class="row1-row">
                        <el-col class="row1-col">
                            <el-card class="row1-card" shadow="hover" @click="router.push({ path: '/resource/VenuApplyList', query: { status: '已预约' } })">
                              <div class="myicon">
                                  <el-icon
                                    size="50px"
                                    :style="{ color: '#5cadff' }"
                                    class="icon"
                                  >
                                    <component :is="'wendang1'"></component>
                                  </el-icon>
                                  <p>已预约</p>
                              </div>
                            </el-card>
                            <el-card class="row1-card" shadow="hover" @click="router.push({ path: '/resource/VenuApplyList', query: { status: '使用中' } })">
                              <div class="myicon">
                                  <el-icon
                                    size="50px"
                                    :style="{ color: ' #95d475' }"
                                    class="icon"
                                  >
                                    <component :is="'weiwancheng2'"></component>
                                  </el-icon>
                                  <p>使用中</p>
                              </div>
                            </el-card>
                            <el-card class="row1-card" shadow="hover" @click="router.push({ path: '/resource/VenuApplyList', query: { status: '已结束' } })">
                              <div class="myicon">
                                  <el-icon
                                    size="50px"
                                    :style="{ color: '#b1b3b8' }"
                                    class="icon"
                                  >
                                    <component :is="'jiaoyan'"></component>
                                  </el-icon>
                                  <p>已结束</p>
                              </div>
                            </el-card>
                            <el-card class="row1-card" shadow="hover" @click="router.push('/resource/apply/VenueStatusList')">
                              <div class="myicon">
                                  <el-icon
                                    size="50px"
                                    :style="{ color: '#f89898' }"
                                    class="icon"
                                  >
                                    <component :is="'wodedaiban'"></component>
                                  </el-icon>
                                  <p>我要预约</p>
                              </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-card>
            </el-main>
            <el-main class="row1-main2">
                <el-card style="height: 100%;" shadow="never">
                    <v-chart style="width: 100%;height: 100%;" :option="option2"></v-chart>
                </el-card>
            </el-main>
        </div>
        <div class="row2">
            <el-main class="row2-main">
                <el-card style="height: 100%;" shadow="never">
                    <el-row class="row2-row">
                        <div style="width: 70%;">
                            <h2 style="height: 20%;">经常预约</h2>
                            <div class="row2-div1">
                                <div v-for="item in venueData">
                                    <el-card class="row2-card" shadow="never"><h3 style="color: black;">{{ item.venueName }}</h3></el-card>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row2-div2">
                            <v-chart style="width: 100%;height: 100%;" :option="option"></v-chart>
                        </div>
                    </el-row>
                </el-card>
            </el-main>
        </div>
        <div class="row3">
            <el-main class="row3-main">
                <el-card class="row3-card" shadow="hover" v-for="(item , index) in recentList">
                  <div v-if="item ==''"><el-empty :image-size="100" style="margin: 0;"/></div>
                  <div class="row3-card2" v-else>
                    <div class="p1">
                      <h3>{{ recentTitle[index] }}</h3>
                    </div>
                    <div class="p2">
                      <p>场地名：{{ item.venueName }}</p>
                    </div>
                    <div class="p3">
                      <p>时间段：{{ item.venueTime }}</p>
                    </div>
                    <div class="p4">
                      申请理由：<p>{{ item.content }}</p>
                    </div>
                    <div class="p5" v-if="item.opinion">
                      反馈理由：<p>{{ item.opinion }}</p>
                    </div>
                  </div>
                  
                </el-card>
            </el-main>
        </div>
    </div>
</template>
<style>
.el-card__body{
    height: 100%;
}
</style>
<style scoped>
.total{
    --row1:250px;
    --row2:170px;
}
.row1{
    display: flex;
    --card-wh:calc(var(--row1) - 100px);
}

.row1-main1{
    height: var(--row1);
    width: 65%;
}

.row1-card{
    width: var(--card-wh);
    height: var(--card-wh);
    min-width: var(--card-wh);
    border: none;
}

.row1-row{
    height: 100%;
    display: flex;
    align-items: center;
}

.row1-col{
    display: flex;
    justify-content: space-between;
}

.row1-main2{
    height: var(--row1);
    width: 35%;
    padding: 20px 20px 20px 0;
    
}

@media screen  and (max-width:992px){
    .row1-main2{
        display: none;
    }
    .row2-div2{
        display: none;
    }
}

.row2-main{
    height: var(--row2);
    padding: 0 20px;
}
.row2-row{
    height: 100%;
}
.row2-card{
    width: calc(var(--row2) - 58px);
    background-color: var(--el-color-primary);
}
.row2-div1{
    height: 80%;
    display: flex;
    align-items: center;
    gap: 5%;
}
.row2-div2{
    width: 30%;
    background-color: white;
    min-width: 150px;
}

.row3-main{
    display: flex;
    justify-content: space-between;
}
.row3-card{
    margin:0 10px;
    width: calc(100% / 3);
    min-width: 200px;
    min-height: 280px;
}
.row3-card2{
  height: 100%;
  overflow: hidden;
  font-size: 13px;
  p{
    margin:2px 0;
  }
}
.myicon{
  margin: 10px auto;
  width: fit-content;
}
.myicon p{
  text-align: center;
}
.p5 p{
  color: #eebe77;
}
</style>